import ro from "element-ui/src/locale/lang/ro";

const points = [
    {
        x: 0,
        y: 0,
        colour: '#F99D28'
    },
    {
        x: 100,
        y: 100,
        colour: '#F99D28'
    },
    {
        x: 300,
        y: 200,
        colour: '#F99D28'
    },
    {
        x: 300,
        y: 300,
        colour: '#F99D28'
    },
    {
        x: 500,
        y: 400,
        colour: '#F99D28'
    }
]

export function getNodes(point = points) {
    const pointNode = {
        text: '',
        name: 'image',
        fillStyle: '#F99D28',
        strokeStyle: 'transparent'
    }
    let arr = []
    point.forEach(p => {
        arr.push({
            ...pointNode,
            image: p.colour ? p.colour : '/mocks/image/user.png',
            rect: {
                width: 40,
                height: 30,
                x: 0,
                y: 0
            },
            data: {
                width: 40,
                height: 30,
                ...p
            }
        })
    })
    console.log(arr)

    return arr
}

const timex = 28.34 * (1 / (config.width * 28.34 / 1200))
const timey = 28.34 * (1 / (config.height * 28.34 / 600))

export function getHistoryNodes(point = points) {
    const pointNode = {
        text: '',
        name: 'circle',
        fillStyle: '#F99D28',
        strokeStyle: 'transparent'
    }
    let arr = []
    point.forEach(p => {
        arr.push({
            ...pointNode,
            rect: {
                width: 0,
                height: 0,
                x: p.x ? Math.round(Math.abs(Number(p.x)) * timex) : 0,
                y: p.y ? Math.round((config.height - Math.abs(Number(p.y))) * timey) : 0
            },
            data: {
                width: 10,
                height: 10,
                ...p
            }
        })
    })
    console.log(arr)

    return arr
}

export function getHistoryNodesByCanvas(point) {
    let arr = []
    point.forEach(p => {
        arr.push({
            x: Math.round(Math.abs(Number(p.x || p.x == 0 ? p.x  : 0)) * timex),
            y: Math.round((config.height - Math.abs(Number(p.y || p.y == 0 ? p.y : 0))) * timey),
            image: p.colour
        })
    })
    console.log(arr)
    return arr
}

const line = {
    name: 'line',
    type: 1,
    strokeStyle: '#000',
    lineWidth: 2,
    fromArrow: '',
    toArrow: ''
}

export function getLines(lines) {
    let arr = []
    lines.forEach(l => {
        arr.push({
            ...line,
            ...l
        })
    })
    return arr
}

export const ctx = function(cvs, routes,that) {
    console.log(cvs)
    // 绘图速度
    let speed = 0.5
    // 绘图间隔
    let timeout = 0
    let timer = 0
    var startTime = null
    let ctx = cvs.getContext('2d')
    console.log(ctx)
    let points = [] //已经运动过的数据
    let animatePoint = { x: 0, y: 0 } //当前运动点位置
    let nextPointIndex = 1 //下一个运动点的index

    //源数据
    // let routes = [
    //     { x: 12, y: 666 },
    //     { x: 190, y: 120 },
    //     { x: 354, y: 456 },
    //     { x: 269, y: 85 },
    //     { x: 456, y: 41 },
    //     { x: 789, y: 120 },
    //     { x: 876, y: 354 },
    // ]
    //开始运动
    init(routes)

    function init(routes) {
        console.log(routes)
        animatePoint = { x: 0, y: 0 }
        nextPointIndex = 1
        ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)
        console.log(cvs.clientWidth, cvs.clientHeight)
        if (routes.length > 0) {
            points.push({
                x: routes[0].x,
                y: routes[0].y,
                image: routes[0].image
            })
            animatePoint = {
                x: routes[0].x,
                y: routes[0].y,
                image: routes[0].image
            }

            drawPoint(routes[0].x, routes[0].y, routes[0].image)
        }

        if (routes.length > 1) {
            startTimer()
        }
    }

    function startTimer() {
        startTime = new Date().getTime()
        if (routes.length > 1) {
            clearTimer()
            animate()
        }
    }

    function clearTimer() {
        window.cancelAnimationFrame(timer)
    }

    function animate() {
        timer = window.requestAnimationFrame(animate)
        startMove()
    }

    function startMove() {
        let targetDistance = Math.sqrt(
            Math.pow(routes[nextPointIndex - 1].x - routes[nextPointIndex].x, 2) +
            Math.pow(routes[nextPointIndex - 1].y - routes[nextPointIndex].y, 2)
        )

        let currentDistance = Math.sqrt(
            Math.pow(routes[nextPointIndex - 1].x - animatePoint.x, 2) +
            Math.pow(routes[nextPointIndex - 1].y - animatePoint.y, 2)
        )

        if (currentDistance >= targetDistance) {
            //利用运动距离与目标距离, 判断运动的点是否超过下一个目标点, 超过了就重置下一个点
            startTime = new Date().getTime()

            points[nextPointIndex] = {
                x: routes[nextPointIndex].x,
                y: routes[nextPointIndex].y,
                image: routes[nextPointIndex].image
            }

            animatePoint = {
                x: routes[nextPointIndex].x,
                y: routes[nextPointIndex].y,
                image: routes[nextPointIndex].image
            }

            nextPointIndex++
            that.flag++

            clearTimer()
            if (nextPointIndex <= routes.length - 1) {
                setTimeout(() => {
                    startTimer()
                }, timeout)
            }

            //重绘
            ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)
            drawPolygon(points)
            drawPoint(animatePoint.x, animatePoint.y, animatePoint.image)
            return
        }

        if (nextPointIndex > routes.length - 1) {
            //轨迹运动结束后, 关闭timer
            clearTimer()

            animatePoint = {
                x: routes[routes.length - 1].x,
                y: routes[routes.length - 1].y,
                image: routes[routes.length - 1].image
            }
        } else {

            let deltaTime = new Date().getTime() - startTime
            let deltaDistance = deltaTime * speed
            let rate = deltaDistance / targetDistance
            let x =
                routes[nextPointIndex - 1].x +
                (routes[nextPointIndex].x - routes[nextPointIndex - 1].x) * rate
            let y =
                routes[nextPointIndex - 1].y +
                (routes[nextPointIndex].y - routes[nextPointIndex - 1].y) * rate

            animatePoint.x = x
            animatePoint.y = y

            //重绘, 将animatePoint设为轨迹的下一个点, 以达到动态的效果
            points[nextPointIndex] = {
                x: animatePoint.x,
                y: animatePoint.y,
                image: animatePoint.image
            }
            ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)
            drawPolygon(points)
            drawPoint(animatePoint.x, animatePoint.y, animatePoint.image)
        }
    }

    function drawPoint(x, y, image = '/mocks/image/user.png') {
        console.log(image)
        //绘制点
        // ctx.fillStyle = color || 'transparent'
        ctx.strokeStyle = 'transparent'
        ctx.fillStyle = 'transparent'
        // ctx.width = '50px'
        // ctx.height = '50px'
        var image1 = new Image()
        image1.src = image
        // image1.onload = function() {
        //     ctx.fillStyle = image1
        // }

        // if (!color) {
        //     ctx.shadowColor = '#FFF'
        //     // ctx.shadowBlur = 10
        // }
        ctx.drawImage(image1,x-10,y-10,20,20);
        ctx.beginPath()

        ctx.arc(x, y, 5, Math.PI * 2, 0, true)
        ctx.closePath()
        ctx.stroke()
        ctx.fill()
    }

    function drawPolygon(points) {
        //绘制轨迹
        ctx.clearRect(0, 0, cvs.clientWidth, cvs.clientHeight)

        ctx.strokeStyle = '#1DEFFF'
        // ctx.shadowColor = '#1DEFFF'
        // ctx.shadowBlur = 10
        ctx.lineWidth = 2

        ctx.beginPath()
        ctx.moveTo(points[0].x, points[0].y)
        let i = 1,
            len = points.length
        for (; i < len; i++) {
            ctx.lineTo(points[i].x, points[i].y)
        }
        ctx.stroke()

        let j = 0
        for (; j < len - 1; j++) {
            drawPoint(points[j].x, points[j].y, points[j].image)
        }
    }
}
